<template>
  <div>
    <el-dialog title="映射列表" :visible="visible" width="900px" @open="openDialog"
               @update:visible="updateVisible" :close-on-click-modal="false">
      <div style="margin-bottom: 10px;">
        <el-input style="width: 250px;margin-right: 10px;" placeholder="请输入映射名称" v-model="listQuery.name"
                  clearable></el-input>
        <el-button type="primary" @click="fieldMappingList(listQuery)">查 询</el-button>
      </div>
      <el-table :data="gridData" max-height="290">
<!--        <el-table-column label="" width="30px">-->
<!--          <template slot-scope="scope">-->
<!--            <el-radio-->
<!--              :label="scope.row.id"-->
<!--              v-model="templateRadio"-->
<!--              @change="getTemplateRow(scope.row)"-->
<!--            >&nbsp;-->
<!--            </el-radio>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column property="name" label="映射名称" show-overflow-tooltip></el-table-column>
        <el-table-column property="description" label="描述信息" show-overflow-tooltip></el-table-column>
        <el-table-column property="createUser" label="创建人" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="use(scope.row)">引用</el-button>
            <el-button type="text" @click="innerOpen(scope.$index,scope.row)" style="margin-right:10px">详情</el-button>
            <el-popconfirm
              @onConfirm="deleteMapping(scope.$index, scope.row)"
              confirm-button-text='确定'
              cancel-button-text='我点错了'
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除该映射吗？"
            >
              <el-button type="text" slot="reference" v-permission="'fieldMapping:delete'">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="updateVisible(false)">取 消</el-button>-->
<!--        <el-button type="primary" @click="determineMapping">确 定</el-button>-->
<!--      </div>-->
      <pagination v-show="totalCount>0" :total="totalCount" :page.sync="listQuery.pageNum"
                  :limit.sync="listQuery.pageRow" layout="total, prev, pager, next" :hide-on-single-page="value"
                  @pagination="fieldMappingList"/>
    </el-dialog>
    <MappingDetail :mapping='mapping' :visible.sync="drawerMappingDetail" :ruleOptions="ruleOptions"
                   :reList="reList"></MappingDetail>
  </div>
</template>

<script>
import {
  fieldMappingListApi,
  deleteFieldMappingApi,
} from '@/api/api'
import Pagination from '@/components/Pagination/index'
import MappingDetail from './mappingDetail'

export default {
  name: "MappingList",
  props: ['visible', 'id', 'table', 'refreshKey', 'ruleOptions', 'reList'],
  components: {Pagination, MappingDetail},
  data() {
    return {
      totalCount: 0,
      listQuery: {
        pageRow: 10,
        pageNum: 1,
        name: "",
        dataSourceId: ""
      },
      value: false,
      gridData: [],
      templateRadio: "",
      mapping: [],
      drawerMappingDetail: false
    }
  },
  watch: {
    // visible(){
    //   this.viewFieldMappingList()
    // }
  },
  methods: {
    /*打开本组件弹框的回调*/
    openDialog() {
      this.templateRadio = ""
      this.totalCount > this.listQuery.pageRow ? this.value = false : this.value = true
      this.fieldMappingList()
    },

    /*映射规则列表*/
    async fieldMappingList() {
      this.listQuery.dataSourceId = this.id;
      const resp = await fieldMappingListApi(this.listQuery)
      this.gridData = resp.list
      this.totalCount = resp.totalCount
    },

    /*映射规则应用列表*/
    determineMapping() {
      //表格内名称和映射里表格名称一致的将被赋值
      for (const argument of this.mapping) {
        for (const argumentElement of this.table) {
          if (argument.COLUMN_NAME === argumentElement.COLUMN_NAME) {
            argumentElement.FAKER = argument.FAKER
            argumentElement.VALUE = argument.VALUE
            argumentElement.params = argument.params
            argumentElement.contactTable = argument.contactTable
            argumentElement.contactColumn = argument.contactColumn
            argumentElement.isContact = argument.isContact
            argumentElement.sqlText = argument.sqlText
            argumentElement.copyCurrentField = argument.copyCurrentField
            argumentElement.isMapping = argument.isMapping
            argumentElement.mappingJson = argument.mappingJson
            argumentElement.matchKey = argument.matchKey
            argumentElement.valueKey = argument.valueKey
            argumentElement.fileList = argument.fileList
            argumentElement.fileName = argument.fileName
            argumentElement.filePath = argument.filePath
          }
        }
      }
      this.updateVisible(false)
      this.$emit('updateRefreshKey', true)
      this.$message({message: "映射匹配成功", type: 'success'})
    },

    /*删除映射*/
    async deleteMapping(index, row) {
      let resp = await deleteFieldMappingApi(row.id)
      this.$message({message: resp, type: 'success'})
      await this.fieldMappingList()
    },

    /*更新本组件对话框状态*/
    updateVisible(val) {
      this.$emit('update:visible', val)
    },

    /*打开子组件规则详情抽屉*/
    innerOpen(index, row) {
      this.mapping = JSON.parse(row.mapping)
      this.drawerMappingDetail = true
    },

    /*切换映射表格radio*/
    getTemplateRow(row) {
      console.log(row)
      this.templateRadio = row.id
      this.mapping = JSON.parse(row.mapping)
      this.$emit("mappingObj", JSON.stringify({name: row.name, id: row.id}))
    },

    use(row) {
      this.mapping = JSON.parse(row.mapping)
      this.$emit("mappingObj", JSON.stringify({name: row.name, id: row.id}))
      //表格内名称和映射里表格名称一致的将被赋值
      for (const argument of this.mapping) {
        for (const argumentElement of this.table) {
          if (argument.COLUMN_NAME === argumentElement.COLUMN_NAME) {
            argumentElement.FAKER = argument.FAKER
            argumentElement.VALUE = argument.VALUE
            argumentElement.params = argument.params
            argumentElement.contactTable = argument.contactTable
            argumentElement.contactColumn = argument.contactColumn
            argumentElement.isContact = argument.isContact
            argumentElement.sqlText = argument.sqlText
            argumentElement.copyCurrentField = argument.copyCurrentField
            argumentElement.isMapping = argument.isMapping
            argumentElement.mappingJson = argument.mappingJson
            argumentElement.matchKey = argument.matchKey
            argumentElement.valueKey = argument.valueKey
            argumentElement.fileList = argument.fileList
            argumentElement.fileName = argument.fileName
            argumentElement.filePath = argument.filePath
          }
        }
      }
      this.updateVisible(false)
      this.$emit('updateRefreshKey', true)
      this.$message({message: "映射匹配成功", type: 'success'})
    },
  }
}
</script>

<style scoped>

</style>
